<template>
	<div class="content4and5">
		<div class="content4">
			<h2 class="content4title">{{t4title}}</h2>
			<div class="content4cont">
				<div class="content4goods" v-for="item in partsData1">
					<img class="content4goodsImg" :src="$store.state.url + item.goods_coverimg">
					<h3 class="content4goodsname">{{item.goods_name}}</h3>
					<div class="content4goodsrmb">
						￥
					</div>
					<div class="content4goodsprice">
						{{item.goods_price}}
					</div>
					<img class="priceImg" src="../images/car.png" @click="changeisclickcar(item.goods_id)">
				</div>
			</div>
		</div>
		<div class="content5">
			<div class="content5con">
				<h2 class="content5title">{{content5title}}</h2>
				<div class="content5btns" @click="test1">
					<span class="content5btn" style="background-color: #FFE32A;">
						全部(xx)
					</span>
					<span class="content5btn">
						超好吃(xx）
					</span>
					<span class="content5btn">
						颜值爆表(xx）
					</span>
					<span class="content5btn">
						不甜腻(xx）
					</span>
					<span class="content5btn">
						细腻绵软(xx）
					</span>
					<span class="content5btn">
						给配送小哥点赞(xx）
					</span>
				</div>
				<ul>
					<li class="content5pingjia" v-for="item in accountcontent">
						<template v-if="userId==item.goods_id">
							<template v-for="information1 in userinfor">
								<template v-if="information1.user_name==item.user_name">
									<!-- <template v-for="level1 in accountData1"> -->
									<!-- <template v-if="level1.user_name==item.user_name"> -->
									<div class="pingjiabox1">
										<div class="c5imgbox">
											<img class="pingjiatouxiang"
												:src="$store.state.url + information1.user_img">
										</div>
										<template v-for="level1 in accountData1">
											<template v-if="level1.user_name==item.user_name">
												<div class="pingjiadengji">
													{{level1.account_vip}}
												</div>
											</template>
										</template>
									</div>
									<div class="litext">
										<div class="pingjiatele">
											{{information1.user_name}}
										</div>
										<div class="pingjiatime">
											{{item.time}}
										</div>
										<div class="pingjiatext">
											{{item.text}}
										</div>
									</div>
									<!-- </template> -->
									<!-- </template> -->
								</template>
							</template>
						</template>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import addCar from "../../ljy/addcar/addcar.vue"
	export default {
		components: {
			addCar
		},
		data() {
			return {
				t4title: "选个配件",
				content5title: "商品评价",
				dengji: "xx",
				tele: "xxxxxxxx",
				pingjiatime: "xxxxxxxxxxx",
				pingjiatext: "xxxxxxxx",
				partsData1: "",
				accountData1: "",
				accountcontent: "",
				userIdpanduan: "",
				userId: "",
				userinfor: "",
				// url3:""
				// delicious:""\\
				// el.target.setdata
			}
		},
		methods: {
			test1: function(el) {
				for (var i = 0; i < el.target.parentElement.children.length; i++) {
					el.target.parentElement.children[i].style.backgroundColor = "white"
				}
				// el.target.parentElement.children[0].style.backgroundColor="red"

				el.target.style.backgroundColor = "#FFE32A"
				// console.log(el.target.parentElement)

			},
			changeisclickcar(goods_id) {
				this.$store.commit("changeGoodsid", goods_id);
				this.$store.commit("changeIsclickcar");
				// },

				// el.target.style.backgroundColor="#FFE32A"
				// console.log(el.target.parentElement)

			}

		},
		async mounted() {
			let res = await this.axios("/wrx/test"); //accountData1
			this.partsData1 = res.data.partsData1;
			this.accountData1 = res.data.accountLevel;
			this.accountcontent = res.data.accountcontent;
			this.userinfor = res.data.userinfor;
			// console.log(this.partsData1);
			// console.log(this.$route.query.id);
			console.log(this.accountcontent);
			// console.log(this.accountcontent[0].goods_id);
			this.userId = this.$route.query.id
			//userinfor
			// console.log(this.accountData1)
			let _this=this
			for (let i = 0; i < _this.accountData1.length; i++) {
				for (let j = 0; j < _this.accountcontent; j++) {
					if (_this.accountData1[i].user_name = _this.accountcontent[j].user_name){
						console.log(i)
					}
				}
			}
			// console.log(this.userinfor)

			// function() {

			// }
			// if(){

			// }
			// this.url3=this.$store.state.url + this.partsData1.goods_coverimg
			// console.log(this.url3);
		}
	}
</script>

<style lang="scss" scoped>
	bg {
		background-color: yellow;
	}

	.content4 {
		margin: 0 auto 188px;
		width: 1250px;
	}

	.content4title {
		display: block;
		margin-left: 20px;
		color: #000;
		font-size: 22px;
		line-height: 42px;
		font-weight: 400;
	}

	.content4cont {
		padding-top: 30px;
		width: 1250px;
		display: flex;
		flex-wrap: wrap;
	}

	.content4goods {
		width: 152px;
		height: 223px;
		margin-left: 48px;
		/* background-color: #FFE100; */
		margin-top: 5px;
		position: relative;
	}

	.priceImg {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.content4goodsImg {
		margin-bottom: 9pt;
		width: 150px;
		height: 150px;
		border: 1px solid #e8e8e8;
	}

	.content4goodsname {
		margin-bottom: 6px;
		color: #000;
		font-size: 15px;
		font-weight: 400;
	}

	.content4goodsrmb {
		font-size: 15px;
		display: inline
	}

	.content4goodsprice {
		font-size: 18px;
		display: inline;
		color: #000;
		font-weight: 500;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif;
	}

	.content5 {
		width: 1400px;
		margin: 0 auto;
		padding-bottom: 150px;
	}

	.content5con {
		width: 1200px;
		margin: 0 auto;
	}

	.content5title {
		margin-bottom: 66px;
		color: #000;
		font-size: 25px;
		font-weight: 400;
	}

	.content5btns {
		margin-bottom: 48px;
	}

	.content5btn {
		display: inline-block;
		margin-right: 9pt;
		width: 11pc;
		height: 46px;
		border-radius: 20px;
		background-color: #fff;
		color: #000;
		text-align: center;
		font-size: 14px;
		line-height: 46px;
	}

	.content5pingjia {
		list-style: none;
		display: flex;
		margin-bottom: 21px;
	}

	.pingjiabox1 {
		width: 76px;
		height: 76px;
		position: relative;
		display: inline-block;
	}

	.c5imgbox {
		width: 72px;
		height: 72px;
		border: 2px solid #e6e6e6;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		overflow: hidden;

	}

	.pingjiatouxiang {
		border-radius: 50%;
		width: 72px;
		height: 72px;
	}

	.pingjiadengji {
		width: 24px;
		height: 24px;
		right: 0;
		bottom: 0;
		background-color: #FFE32A;
		position: absolute;
		border-radius: 50%;
		background-color: #ffe32a;
		text-align: center;
		line-height: 24px;
		font-size: 9pt;
		font-weight: 700;
	}

	.litext {
		margin-left: 50px;
	}

	.pingjiatele {
		display: inline-block;
		margin-right: 10px;
		color: #3a3a3a;
		font-size: 18px;
	}

	.pingjiatime {
		display: inline-block;
		color: #929292;
		font-size: 14px;
	}

	.pingjiatext {
		margin-bottom: 8px;
		width: 62.5pc;
		line-height: 24px;
		color: #3a3a3a;
		font-size: 14px;
	}
</style>
